﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
			<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"/>	<title></title>
		<link rel="stylesheet" type="text/css" href="css/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/demos.css" />
		<style type="text/css">
			.weui-tab,
			.weui-tabbar {
				min-width: 320px;
			}
			
			.top {
				height: 50px;
				line-height: 50px;
				text-align: center;
				font-size: 18px;
				color: #9A9A9A;
				font-family: "微软雅黑";
			}
			
			.topb {
				height: 200px;
				box-sizing: border-box;
				background-color: #FF6600;
				padding-top: 40px;
			}
			
			.topb_pa {
				height: 60px;
				line-height: 60px;
				position: relative;
			}
			
			.topb_pa span:first-of-type {
				margin-left: 40px;
				display: inline-block;
				height: 60px;
				width: 60px;
				border-radius: 30px;
			}
			
			.topb_pa span img {
				width: 60px;
			}
			
			.topb_pa span:nth-child(2) {
				left: 120px;
				font-family: "微软雅黑";
				color: white;
				font-size: 18px;
				position: absolute;
				border-top-style: 0px;
				height: 30px;
				line-height: 30px;
			}
			
			.topb_pa span:nth-child(3) {
				position: absolute;
				top: 30px;
				left: 120px;
				font-family: "微软雅黑";
				font-size: 16px;
				border-top-style: 0px;
				height: 30px;
				line-height: 30px;
			}
			
			.topb_pb {
				height: 50px;
				line-height: 50px;
				margin-top: 10px;
			}
			
			.topb_pb span {
				cursor: pointer;
				display: inline-block;
				width: 60px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				border-radius: 10px;
				margin-left: 40px;
				background-color: #FFBE00;
				color: red;
				font-size: 14px;
			}
			
			.tab {
				margin-top: 5px;
				height: 60px;
				border-bottom: 5px solid #ADADAD;
			}
			
			.tab .weui-flex__item p {
				height: 30px;
				line-height: 30px;
				text-align: center;
				font-size: 14px;
			}
			
			.tab .weui-flex__item img {
				width: 30px;
			}
			
			.weui-cell .weui-cell__hd img {
				max-width: 40px;
			}
			
			#tab4 {
				padding-bottom: 60px;
				box-sizing: border-box;
			}
		</style>
	</head>

	<body>
		<div class="weui-tab">
			<div class="weui-tab__bd">
				<div id="tab4" class="weui-tab__bd-item weui-tab__bd-item--active">
					<div class="top">
						<span>个人中心</span>
					</div>
					<div class="topb">
						<p class="topb_pa"><span><img src="img/img/icon_brand_alipay.png"/></span><span>156****2935</span><span>普通会员 0积分可用</span></p>
						<p class="topb_pb"><span>签到</span></p>
					</div>
					<!--4个tab切换-->
					<div class="tab">
						<div class="weui-flex">
							<div class="weui-flex__item">
								<div class="placeholder">
									<p><img src="img/img/priv_on_01.png" /></p>
									<p><span>待支付</span></p>
								</div>
							</div>
							<div class="weui-flex__item">
								<div class="placeholder">
									<p><img src="img/img/priv_on_06.png" /></p>
									<p><span>待发货</span></p>
								</div>
							</div>
							<div class="weui-flex__item">
								<div class="placeholder">
									<p><img src="img/img/priv_on_03.png" /></p>
									<p><span>已发货</span></p>
								</div>
							</div>
							<div class="weui-flex__item">
								<div class="placeholder">
									<p><img src="img/img/priv_on_05.png" /></p>
									<p><span>已完成</span></p>
								</div>
							</div>
						</div>
					</div>
					<!--详细内容-->
					<div calss="main">
						<a class="weui-cell weui-cell_access" href="javascript:;">
							<div class="weui-cell__hd"><img src="img/img/icon_coupon.png"></div>
							<div class="weui-cell__bd">
								<p>我的订单</p>
							</div>
							<div class="weui-cell__ft"></div>
						</a>
						<a class="weui-cell weui-cell_access" href="javascript:;">
							<div class="weui-cell__hd"><img src="img/img/icon_concern.png"></div>
							<div class="weui-cell__bd">
								<p>我的关注</p>
							</div>
							<div class="weui-cell__ft"></div>
						</a>
						<a class="weui-cell weui-cell_access" href="javascript:;">
							<div class="weui-cell__hd"><img src="img/img/icon_goods.png"></div>
							<div class="weui-cell__bd">
								<p>商品列表</p>
							</div>
							<div class="weui-cell__ft"></div>
						</a>
						<a class="weui-cell weui-cell_access" href="javascript:;">
							<div class="weui-cell__hd"><img src="img/img/icon_logistics.png"></div>
							<div class="weui-cell__bd">
								<p>快递查询</p>
							</div>
							<div class="weui-cell__ft"></div>
						</a>
						<a class="weui-cell weui-cell_access" href="javascript:;">
							<div class="weui-cell__hd"><img src="img/img/icon_integral.png"></div>
							<div class="weui-cell__bd">
								<p>我的钱包</p>
							</div>
							<div class="weui-cell__ft"></div>
						</a>
						<a class="weui-cell weui-cell_access" href="javascript:;">
							<div class="weui-cell__hd"><img src="img/img/icon_brand_weibo.png"></div>
							<div class="weui-cell__bd">
								<p>分享微博</p>
							</div>
							<div class="weui-cell__ft"></div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div class="weui-tabbar">
			<a href="index.html" class="weui-tabbar__item ">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_button.png" alt="">
				</div>
				<p class="weui-tabbar__label">首页</p>
			</a>
			<a href="home2.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_msg.png" alt="">
				</div>
				<p class="weui-tabbar__label">分类</p>
			</a>
			<a href="home3.html" class="weui-tabbar__item">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_article.png" alt="">
				</div>
				<p class="weui-tabbar__label">购物车</p>
			</a>
			<a href="home4.html" class="weui-tabbar__item weui-bar__item--on">
				<div class="weui-tabbar__icon">
					<img src="./images/icon_nav_cell.png" alt="">
				</div>
				<p class="weui-tabbar__label">我的良品</p>
			</a>
		</div>
		<script src="lib/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-weui.min.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>